import {StyleValue} from "vue"
import {TableItem} from "../table-item/constructor.ts"
import {ElInput} from "../input/constructor.ts"
import {ElInputNumber} from "../input-number/constructor.ts"
import {ElButton} from "../button/constructor.ts"
import {ElSelect} from "../select/constructor.ts"
import {ElSwitch} from "../switch/constructor.ts"
import {ElRadio} from "../radio/constructor.ts"
import {ElRate} from "../rate/constructor.ts"
import {ElColorPicker} from "../color-picker/constructor.ts"
import {ElSlider} from "@/framework/core/slider/constructor.ts"
import {ElDatePicker} from "@/framework/core/date-picker/constructor.ts"

/**
 * 创建表单组件
 */
export interface CreateFormElsComponents<Name, Prop, Props, Events> {
    /**
     * 文本
     */
    label?: string
    /**
     * 名称
     */
    eType: Name
    /**
     * 数据
     */
    prop?: keyof Prop
    /**
     * 属性
     */
    props?: Partial<Props>
    /**
     * 事件
     */
    events?: Partial<Events>
    /**
     * 样式
     */
    style?: Partial<StyleValue>
    /**
     * 是否隐藏
     */
    show?: (data?: Prop) => boolean
}

/**
 * 表单组件列表
 */
type ComponentsMap<Prop> =
    ElInput<Prop>
    | ElInputNumber<Prop>
    | ElButton
    | ElSelect<Prop>
    | ElSwitch<Prop>
    | ElRadio<Prop>
    | ElRate<Prop>
    | ElColorPicker<Prop>
    | ElSlider<Prop>
    | ElDatePicker<Prop>

/**
 * 自定义渲染
 */
type CustomerRender<Prop> = {
    /**
     * 文本
     */
    label?: string
    /**
     * 数据
     */
    prop?: keyof Prop
    /**
     * 自定义渲染
     */
    renderFn: (data: Prop) => JSX.Element
}

/**
 * 选择组件
 */
export type FormEls<Prop> = ComponentsMap<Prop> | CustomerRender<Prop>

/**
 * 列表组件
 */
export type TableEls<Prop> = TableItem<Prop>

/**
 * 创建列表
 */
export interface CreateTableElsComponents<Prop, Props, Events> {
    /**
     * 文本
     */
    label: string,
    /**
     * 数据
     */
    prop: keyof Prop,
    /**
     * 宽度
     */
    width?: number
    /**
     * 最小宽度
     */
    minWidth?: number
    /**
     * 属性
     */
    props?: Props,
    /**
     * 事件
     */
    events?: Events,
    /**
     * 自定义渲染
     */
    renderFn?: (this: any, row: Prop) => JSX.Element
}
